<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animate 特效</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="../../common/layui/css/layui.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../../common/css/gobal.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../../common/css/animate.css" media="all" />
    <style type="text/css">
        h2{font:60px "Microsoft Yahei";font-weight:500;text-align:center;color:#f326c5;margin-bottom:40px}
        .cms-wrapper{background:#fff;padding-top:130px}
        .wrap p{margin-bottom:70px;font:30px "Microsoft Yahei";text-align:center;color:#999}
        .jq22-explain{display:none;margin-top:20px;margin-bottom:20px;font-size:14px;text-align:center;color:#f50}
        .tab{width:1000px;margin:0 auto;border:1px solid #ddd}
        .tabNav{padding-bottom:10px;overflow:hidden;zoom:1;background-color:#f5f5f5}
        .tabNav li{display:inline;float:left;margin:10px 0 0 10px}
        .tabNav a{float:left;padding:5px 10px;color:#444;text-decoration:none}
        .tabNav .active a{color:#fff;background-color:#f326c5}
        .tabPane{display:none;overflow:hidden;zoom:1}
        .tabCnt .active{display:block}
        .tabCnt{padding:10px 20px 20px}
        .tabPane li{float:left;margin:10px 10px 0 0;padding:5px 10px;background-color:#eee;cursor:pointer}
        .tabPane .active{color:#f326c5}
    </style>
</head>
<body>
<div class="cms-wrapper">
    <div class="wrap">
        <h2 id="animate">CMS后台管理系统模板</h2>
        <p>animate动画库</p>
    </div>
    <p class="jq22-explain">您的浏览器不支持 CSS3 animate 属性，所以您看不到任何效果，请使用 Firefox、Chrome 或 IE10</p>
    <div class="tab">
        <ul class="tabNav">
            <li class="active"><a>Attention Seekers</a></li>
            <li><a href="###">Bouncing Entrances</a></li>
            <li><a href="###">Bouncing Exits</a></li>
            <li><a href="###">Fading Entrances</a></li>
            <li><a href="###">Fading Exits</a></li>
            <li><a href="###">Flippers</a></li>
            <li><a href="###">Lightspeed</a></li>
            <li><a href="###">Rotating Entrances</a></li>
            <li><a href="###">Rotating Exits</a></li>
            <li><a href="###">Sliders</a></li>
            <li><a href="###">Specials</a></li>
        </ul>
        <div class="tabCnt">
            <h3>点击下面查看效果</h3>
            <ul class="tabPane active">
                <li>bounce</li>
                <li>flash</li>
                <li>pulse</li>
                <li>rubberBand</li>
                <li>shake</li>
                <li>swing</li>
                <li>tada</li>
                <li>wobble</li>
            </ul>

            <ul class="tabPane">
                <li>bounceIn</li>
                <li>bounceInDown</li>
                <li>bounceInLeft</li>
                <li>bounceInRight</li>
                <li>bounceInUp</li>
            </ul>

            <ul class="tabPane">
                <li>bounceOut</li>
                <li>bounceOutDown</li>
                <li>bounceOutLeft</li>
                <li>bounceOutRight</li>
                <li>bounceOutUp</li>
            </ul>

            <ul class="tabPane">
                <li>fadeIn</li>
                <li>fadeInDown</li>
                <li>fadeInDownBig</li>
                <li>fadeInLeft</li>
                <li>fadeInLeftBig</li>
                <li>fadeInRight</li>
                <li>fadeInRightBig</li>
                <li>fadeInUp</li>
                <li>fadeInUpBig</li>
            </ul>

            <ul class="tabPane">
                <li>fadeOut</li>
                <li>fadeOutDown</li>
                <li>fadeOutDownBig</li>
                <li>fadeOutLeft</li>
                <li>fadeOutLeftBig</li>
                <li>fadeOutRight</li>
                <li>fadeOutRightBig</li>
                <li>fadeOutUp</li>
                <li>fadeOutUpBig</li>
            </ul>

            <ul class="tabPane">
                <li>flip</li>
                <li>flipInX</li>
                <li>flipInY</li>
                <li>flipOutX</li>
                <li>flipOutY</li>
            </ul>

            <ul class="tabPane">
                <li>lightSpeedIn</li>
                <li>lightSpeedOut</li>
            </ul>

            <ul class="tabPane">
                <li>rotateIn</li>
                <li>rotateInDownLeft</li>
                <li>rotateInDownRight</li>
                <li>rotateInUpLeft</li>
                <li>rotateInUpRight</li>
            </ul>

            <h3></h3>
            <ul class="tabPane">
                <li>rotateOut</li>
                <li>rotateOutDownLeft</li>
                <li>rotateOutDownRight</li>
                <li>rotateOutUpLeft</li>
                <li>rotateOutUpRight</li>
            </ul>

            <ul class="tabPane">
                <li>slideInDown</li>
                <li>slideInLeft</li>
                <li>slideInRight</li>
                <li>slideOutLeft</li>
                <li>slideOutRight</li>
                <li>slideOutUp</li>
            </ul>

            <ul class="tabPane">
                <li>hinge</li>
                <li>rollIn</li>
                <li>rollOut</li>
            </ul>
        </div>
    </div>
</div>
<!-- 加载js文件 -->
<script type="text/javascript" src="../../common/layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript">
    layui.use(['common'], function() {
        var $      = layui.$,
            common = layui.common;
        common.larryCmsLoadJq('../../common/plus/jquery-migrate.min.js', function() {
            $(function() {
                if ($.browser.msie && $.browser.version < 10) {
                    $('.jq22-explain').show();
                }

                var $animate = $('#animate');
                var $btn = $('.tabCnt').find('li');
                $btn.click(function() {
                    $(this).addClass('active').siblings().removeClass('active');
                    $animate.removeClass().addClass($(this).text() + ' animated infinite');
                    setTimeout(removeClass, 1000);
                });

                function removeClass() {
                    $animate.removeClass();
                }

                var $tabNavItem = $('.tabNav').find('a');
                var $tabPane = $('.tabPane');
                $tabNavItem.each(function(i) {
                    $(this).click(function() {
                        $(this).parent().addClass('active').siblings().removeClass('active');
                        $tabPane.eq(i).addClass('active').siblings().removeClass('active');
                        return false;
                    });
                });
            });

        });
    });
</script>
</body>
</html>